<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <h1>{{name}}</h1>
    <div class="app">
        <input v-model="name" type="text" class="name" >
        <h1>{{name}}</h1>
        <a href="index.html">Index</a>
        <a href="test.html">Test</a>
        <button class="ajax" @click="getUsers">Ajax</button>
        <!--list-->
        <ul>
            <li v-for=" item in users">
                <strong>ID:</strong>
                <span>{{item.id}}</span>
                <strong>标题:</strong>
                <span>{{item.title}}</span>
                <strong>发布时间:</strong>
                <span>{{item.releaseYear}}</span>
            </li>

            <button @click="visible = true">Show</button>
            <button @click="visible = false">Hide</button>


            <div v-if="visible" style="height: 200px; width: 200px; background: aqua">
                <h1>jjjj</h1>
            </div>
        </ul>

    </div>
</body>

<script>

    //VUE
    new Vue({
        el: '.app',  //选择

        data: {
            'name': 'xxxxx',
            'visible': true,
            users: [],
        },

        methods: {
            getUsers: function () {

                var that = this;

                $.ajax(
                    {
                        url:"https://facebook.github.io/react-native/movies.json",
                        success:function(result){
                            that.users = result.movies;
                        },
                        error: function (err) {
                            throw err;
                        }
                    });

            }
        }
    })



</script>

</html>